<template>
	<view class="p-50 p-t-30 left">
		<text class="ts-40 tb wa left">
			<text class="tc-green">君能</text>e站
		</text>
		<br>
		<text class="ts-24 wa left m-t-5">
			<text class="tc-gray">司机你好，请先创建车辆</text>
		</text>
		<view class="form-item" style="margin-top: 55rpx;">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.realname" :maxlength="5" placeholder="填写车辆品牌"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.realname.length }}/</span>5
			</view>
		</view>
		<view class="form-item">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.mobile" :maxlength="10" placeholder="填写车辆型号"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.mobile.length }}/</span>10
			</view>
		</view>
		<view class="form-item">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.type" :maxlength="10" placeholder="填写车辆牌照"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.type.length }}/</span>10
			</view>
		</view>
		<view class="form-item">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.accountno" :maxlength="20" placeholder="填写行驶证号"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.accountno.length }}/</span>20
			</view>
		</view>
		<view class="form-select">
			<text class="tc-gray form-text">选择车辆类型</text>
			<view class="form-select-item" :class="active===item.name ? 'active' : ''" v-for="(item,index) in carsType" :key="index" @click="selectCarType(item)">{{item.name}}</view>
		</view>
		<view class="form-submit" @click="submit()">
			完成创建
		</view>
		<xy-tabbar />
	</view>
</template>

<script>
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar
		},
		data() {
			return {
				css: {},
				lat:0,
				lng:0,
				isLoading:true,
				itemList:[],
				pageStyle:{},
				carsType:[
					{name:'冷藏车',value:'bank'},
					{name:'微货车',value:'alipay'},
					{name:'中面包车',value:'alipay'},
					{name:'小面包车',value:'alipay'},
					{name:'微型面包车',value:'alipay'},
					{name:'小货车',value:'alipay'},
				],
				active: "冷藏车",
				accountType:[{name:'银行卡',value:'bank'},{name:'支付宝',value:'alipay'}],
				accountTypeIndex:-1,
				accountInfo:{
					id:0,
					realname:'',
					mobile:'',
					type:'',
					accountname:'',
					accountno:''
				},
			}
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onLoad() {
			this.$xyfun.setNavBar(' ');
			this.css = this.$xyfun.css();
			this.$xyfun.loc().then((res)=>{
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			},()=>{
				this.loadData();
			})
		},
		methods: {
			loadData(){
				this.$api.get({
					url: '/common/template',
					loadingTip:'加载中...',
					data: {
						type:'index',
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.itemList = res.item;
						this.pageStyle = this.$xyfun.tcss(res.page)
						this.$xyfun.setNavBar(res.page.params.navigationBarTitleText,res.page.style.navigationBarBackgroundColor,res.page.style.navigationBarTextStyle);
					}
				});
			},
			selectCarType(item) {
				this.active = item.name;
				this.$xyfun.to('/pages/user/about');
			},
			submit() {
				uni.reLaunch({
					url: '/pages/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-submit {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
    	height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
	.form-select {
		width: 627rpx;
		margin-top: 35rpx;
		padding: 20rpx 10rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		float: left;
		.form-text {
			width: 580rpx;
			float: left; 
			padding: 10rpx 20rpx 18rpx;
		}
		.form-select-item {
			width: 165rpx;
			height: 90rpx;
			border-radius: 15rpx;
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			float: left;
			margin: 15rpx 40rpx 15rpx 0;
			text-align: center;
			line-height: 85rpx;
			color: rgba(135,135,135,0.48);
			background-color: rgba(187,187,187,0.09);
		}
		.form-select-item:nth-child(3n+2) {
			margin-left: 21rpx;
		}
		.form-select-item:nth-child(3n+4) {
			margin-right: 0rpx;
		}
		.active {
			border: 1rpx solid rgba(0,86,80,0.72);
			color: rgba(0,86,80,0.72);
			background-color: white;
		}
	}
</style>